<template>
  <!--
    	作者：luoyiming
    	时间：2020-04-26
    	描述：门店-编辑门店
    -->
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="80px">
      <!--编辑门店-->
      <div class="common-form">添加</div>

      <el-form-item label="国家" prop="country" :rules="[{required: true,message: '请输入国家 '}]">
        <el-input  v-model="form.country" placeholder="请输入国家" class="max-w460"></el-input>
      </el-form-item>

      <el-form-item label="国旗" prop="national_flag" :rules="[{required: true,message: '请输入上传图片 '}]">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload('image','national_flag')">选择图片</el-button>
          <div v-if="form.national_flag" class="img mt10">
            <img :src="form.national_flag" width="100" height="100"/>
          </div>
        </el-row>
      </el-form-item>

   
  
  
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
               <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>

    <!--图片组件-->
    <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">
      上传图片
    </Upload>
  </div>
</template>

<script>


import europeanApi from '@/api/european.js';
import Upload from '@/components/file/Upload';

export default {
  components: {
    Upload,

  },
  data() {
    return {
    
      /*form表单数据*/
      form: {
        country: '',
        national_flag: ''
      },
     
      /*是否上传图片*/
      isupload: false,
      loading: false,
     
    };
  },
  created() {

  
  },

  methods: {
    

    /*打开上传图片*/
    openUpload: function (file_type, file_name) {
    
      this.file_name = file_name;
      if (file_type == 'image') {
        this.config = {
          total: 1,
          file_type: 'image'
        };
      } 
      this.isupload = true;
    },

    /*上传商品图片*/
    returnImgsFunc(e) {
      console.log('上传',e)
      if (e != null) {
        if (this.file_name == 'national_flag') {
          this.form.national_flag = e[0].file_path;
        }


      }
      this.isupload = false;
    },

   


    /*修改*/
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          europeanApi.addcountry(form, true)
            .then(data => {
              self.loading = false;
              self.$message({
                message: '操作成功',
                type: 'success'
              });
              self.$router.push('/plus/european/european/index');
            }).catch(error => {
            self.loading = false;
          });
        }
      });
    },


    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }

  }

};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
  padding-bottom: 50px;
}

.img {
  margin-top: 10px;
}
</style>
<style lang="scss">
.dialog-footer-at-remark-map{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
</style>
